<style>

</style>
<template>
  <el-dialog
    title="边配置"
    :visible.sync="dialogVisible"
    :close-on-press-escape="false"
    :close-on-click-modal="false"
    width="50%"
    :before-close="clearForm">

    <el-form
      :label-position="labelPosition"
      label-width="80px"
      :model="saveData"
      :rules="rules"
      ref="ruleForm"
    >
      <el-form-item label="系统" prop="systemUuid">
        <el-select filterable :disabled="saveData.id !==''" v-model="saveData.systemUuid" placeholder="请选择系统">
          <el-option
            v-for="item in systemOptions"
            :key="item.value"
            :label="item.label"
            :value="item.value">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="边名称" prop="edgeName">
        <el-input :disabled="saveData.id !==''" v-model="saveData.edgeName"></el-input>
      </el-form-item>
      <el-form-item label="边Key" prop="edgeKey">
        <el-input :disabled=" saveData.id !==''" v-model="saveData.edgeKey"></el-input>
      </el-form-item>
    </el-form>

    <span slot="footer" class="dialog-footer">
    <el-button @click="clearForm">取 消</el-button>
    <el-button :disabled="saveData.id !==''" type="primary" @click="save">确 定</el-button>
  </span>
  </el-dialog>
</template>
<script>

import {remoteValidatesSystemKey, remoteValidateSystemName, systemSave} from "@/api/system";
import {systemSelector} from "@/api/loadSelectorApi";
import {remoteValidatesUseCaseKey, remoteValidateUseCaseName, useCaseSave} from "@/api/useCase";
import {nodeSave, remoteValidateNodeName, remoteValidatesNodeKey} from "@/api/node";
import {edgeSave, remoteValidateEdgeName, remoteValidatesEdgeKey} from "@/api/edge";

export default {
  name: "edgeForm",
  filters: {},
  components: {},
  data() {
    const validateName = async (rule, value, callback) => {
      if (this.saveData.id) {
        callback()
      }
      let systemUuid = this.saveData.systemUuid;

      if (systemUuid === '') {
        callback(new Error("请先选择边所属系统"))
      }

      let ret = await remoteValidateEdgeName(systemUuid, value);
      if (ret.data.result) {
        callback()
      } else {
        callback(new Error("边名字不能重复"))
      }
    };
    const validateKey = async (rule, value, callback) => {
      if (this.saveData.id) {
        callback()
      }
      let systemUuid = this.saveData.systemUuid;
      if (systemUuid === '') {
        callback(new Error("请先选择边所属系统"))
      }
      let ret = await remoteValidatesEdgeKey(systemUuid, value);
      if (ret.data.result) {
        callback()
      } else {
        callback(new Error("边Key不能重复"))
      }
    };
    return {
      labelPosition: 'right',
      dialogVisible: false,
      saveData: {
        id:'',
        edgeName: '',
        edgeKey: '',
        systemUuid: '',
      },
      rules: {
        edgeName: [
          {required: true, message: '此项必填', trigger: 'blur'},
          {validator: validateName, trigger: 'blur'}
        ],
        edgeKey: [
          {required: true, message: '此项必填', trigger: 'blur'},
          {validator: validateKey, trigger: 'blur'}
        ],
        systemUuid: [
          {required: true, message: '此项必填', trigger: 'change'}
        ],
      },
      systemOptions: []
    }
  },
  async created() {
    this.systemOptions = await systemSelector();
  },
  mounted() {
  },
  methods: {
    load(data) {
      let vm = this
      if (data) {
        vm.saveData = vm.$cloneObj(data)
      }
      vm.dialogVisible = true
    },
    save() {
      let vm = this
      this.$refs['ruleForm'].validate(async (valid) => {
        if (valid) {
          await vm.doSave(this.saveData)
        }
      })
    },
    async doSave(saveData) {
      let vm = this
      let ret = await edgeSave(saveData);
      if (ret.ok) {
        vm.$message({type: 'success', message: '保存成功'});
      } else {
        vm.$message({type: 'error', message: '保存失败：' + ret.message});
      }
      vm.clearForm()
      vm.$parent.query()
    },
    clearForm() {
      let vm = this
      try {
        vm.saveData = {
          id:'',
          edgeName: '',
          edgeKey: '',
          systemUuid: '',
        }
        vm.$refs['ruleForm'].resetFields()
      } catch (e) {
        console.log(e)
      }
      vm.dialogVisible = false
    }
  }
}
</script>
